<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 订单搜索 -->
      <el-form ref="queryRef" class="queryForm" :rules="queryRules" :model="queryForm" label-width="100px" :hide-required-asterisk="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单号:" prop="name">
              <el-input v-model="queryForm.name" type="number" @input="onchange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="配送方式:" prop="region">
              <el-select v-model="queryForm.region" placeholder="请选择活动区域" @change="onchange">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="到店自提" value="到店自提"></el-option>
                <el-option label="同城配送" value="同城配送"></el-option>
                <el-option label="跨城配送" value="跨城配送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="下单日期:" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="开始日期"
                  v-model="queryForm.date1"
                  style="width: 100%;"
                  @change="onchange"
                ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                <el-date-picker
                  type="date"
                  placeholder="结束日期"
                  v-model="queryForm.date2"
                  style="width: 100%;"
                  @change="onchange"
                ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="default" @click="queryOrder">查询</el-button>
          <el-button type="default" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 订单分类 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane name="全部">
          <template slot="label">
            <span>全部</span>
            <div class="number" v-if="activeName==='全部'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="待支付">
          <template slot="label">
            <span>待支付</span>
            <div class="number" v-if="activeName==='待支付'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="待自提">
          <template slot="label">
            <span>待自提</span>
            <div class="number" v-if="activeName==='待自提'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="待配送">
          <template slot="label">
            <span>待配送</span>
            <div class="number" v-if="activeName==='待配送'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="待发货">
          <template slot="label">
            <span>待发货</span>
            <div class="number" v-if="activeName==='待发货'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="已收货">
          <template slot="label">
            <span>已收货</span>
            <div class="number" v-if="activeName==='已收货'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="售后退款">
          <template slot="label">
            <span>售后退款</span>
            <div class="number" v-if="activeName==='售后退款'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
        <el-tab-pane name="已取消">
          <template slot="label">
            <span>已取消</span>
            <div class="number" v-if="activeName==='已取消'"><span class="tabs-bar">{{total}}</span></div>
          </template>  
        </el-tab-pane>
      </el-tabs>
      <!-- 表格区域 -->
      <el-table :data="orderList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单号" prop="product_id"></el-table-column>
        <el-table-column label="商品列表" prop="product_name"></el-table-column>
        <el-table-column label="下单时间" prop="time"></el-table-column>
        <el-table-column label="订单总金额" prop="price" width="120px"></el-table-column>
        <el-table-column label="配送方式" prop="distribution_mode" width="120px">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.distribution_mode === '到店自提'" size="mini">到店自提</el-tag>
            <el-tag type="primary" v-else-if="scope.row.distribution_mode==='同城配送'" size="mini">同城配送</el-tag>
            <el-tag type="success" v-else size="mini">跨城配送</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" prop="send_place"></el-table-column>
        <el-table-column label="订单状态" prop="order_status" width="120px">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.order_status === '待支付'" size="mini">待支付</el-tag>
            <el-tag type="primary" v-else-if="scope.row.order_status==='待自提'" size="mini">待自提</el-tag>
            <el-tag type="success" v-else-if="scope.row.order_status==='待配送'" size="mini">待配送</el-tag>
            <el-tag type="info" v-else-if="scope.row.order_status==='待发货'" size="mini">待发货</el-tag>
            <el-tag type="primary" v-else-if="scope.row.order_status==='已收货'" size="mini">已收货</el-tag>
            <el-tag type="primary" v-else-if="scope.row.order_status==='售后退款'" size="mini">售后退款</el-tag>
            <el-tag type="primary" v-else size="mini">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="查看订单" placement="top" :enterable="false">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editData(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="取消订单" placement="top" v-if="scope.row.order_status==='待支付' || scope.row.order_status==='待发货' || scope.row.order_status==='待配送'" :enterable="false">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteGoods(scope.row.product_id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="定位" placement="top" :enterable="false">
              <el-button
                type="primary"
                icon="el-icon-map-location"
                size="mini"
                @click="$router.push('/map/'+ scope.row.send_place)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <!-- 分页导航区域
      @size-change(pagesize改变时触发)
      @current-change(页码发生改变时触发)
      :current-page(设置当前页码)
      :page-size(设置每页的数据条数)
      :total(设置总页数)-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 7, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 编辑当前商品对话框 -->
    <el-dialog title="修改订单信息" :visible.sync="editDialogVisible" width="60%">
      <el-form
        :model="goods"
        :rules="editGoodsFormRules"
        ref="editGoodsFormRef"
        label-width="100px"
        class="demo-ruleForm"
        :hide-required-asterisk="true"
      >
        <el-form-item label="商品列表" prop="product_name">
          <el-input v-model="goods.product_name"></el-input>
        </el-form-item>
        <el-form-item label="订单总金额" prop="price">
          <el-input v-model="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="配送方式" prop="distribution_mode">
          <el-select v-model="goods.distribution_mode">
            <el-option label="到店自提" value="到店自提"></el-option>
            <el-option label="同城配送" value="同城配送"></el-option>
            <el-option label="跨城配送" value="跨城配送"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货地址" prop="send_place">
          <el-input v-model="goods.send_place"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="order_status">
          <el-select v-model="goods.order_status">
            <el-option label="待支付" value="待支付"></el-option>
            <el-option label="待自提" value="待自提"></el-option>
            <el-option label="待配送" value="待配送"></el-option>
            <el-option label="待发货" value="待发货"></el-option>
            <el-option label="已收货" value="已收货"></el-option>
            <el-option label="售后退款" value="售后退款"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import '@/mock/dfmock'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      queryForm: {
        name: '',
        region: '全部',
        date1: '',
        date2: ''
      },
      // 查询参数
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
        name: '全部'
      },
      // 查询表单验证
      queryRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      // 订单列表
      orderList: [],
      // 总数据条数
      total: 0,
      // 编辑订单弹框
      editDialogVisible: false,
      // 编辑当前订单的数据
      goods: {},
      // 表单验证
      editGoodsFormRules: {
        product_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        distribution_mode: [
          { required: true, message: '请选择配送方式', trigger: 'blur' }
        ],
        send_place: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        order_status: [
          { required: true, message: '请选择订单状态', trigger: 'blur' }
        ]
      },
      activeName: '全部'
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderList()
  },
  mounted() {},
  methods: {
    // 获取用户订单数据
    async getOrderList() {
      const res = await this.axios.get('/product', {
        params: this.queryInfo
      })
      if (res.data.status !== 200) {
        return this.$message.error('获取用户订单失败')
      }
      this.orderList = res.data.data.list
      this.total = res.data.data.total
    },
    // 修改了每页数据展示条数
    handleSizeChange(num) {
      this.queryInfo.pagesize = num
      this.filterData()
    },
    // 修改了当前页码
    handleCurrentChange(num) {
      this.queryInfo.pagenum = num
      this.filterData()
    },
    // 显示修改订单对话框
    editData(res) {
      this.editDialogVisible = true
      this.goods = Object.assign({}, res)
    },
    // 修改订单
    submitEditForm() {
      this.$refs.editGoodsFormRef.validate((valid) => {
        if (valid) {
          this.orderList = this.orderList.map((item) => {
            if (item.product_id === this.goods.product_id) {
              item = this.goods
            }
            return item
          })
          this.editDialogVisible = false
          this.$message.success('修改订单数据成功')
        }
      })
    },
    // 删除商品数据
    async deleteGoods(id) {
      // this.cof返回的是一个Promise对象
      const result = await this.$confirm(
        '此操作将取消该订单, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 捕捉错误并且返回这个错误
      // 点击取消返回一个cancel字符串
      // 点击确认返回一个confirm字符串
      if (result !== 'confirm') {
        return this.$message.success('你取消了')
      }
      this.orderList = this.orderList.filter((item) => {
        return item.product_id !== id
      })
      this.$message.success('取消订单成功')
    },
    // 点击筛选数据
    async handleClick() {
      if (this.activeName !== '全部') {
        this.queryInfo.name = this.activeName
        const res = await this.axios.get('/orders', {
          params: this.queryInfo
        })
        this.orderList = res.data.data.list
        this.total = res.data.data.total
      } else {
        this.getOrderList()
      }
    },
    // 筛选函数
    filterData() {
      if (this.activeName === '全部') {
        this.getOrderList()
      } else {
        this.handleClick()
      }
    },
    // 查询订单
    queryOrder() {
      this.$refs.queryRef.validate((valid) => {
        if (valid) {
          this.orderList = this.orderList.filter(item => {
            if (this.queryForm.region === '全部') {
              return item.product_id == this.queryForm.name && this.format(this.queryForm.date1) <= this.format(item.time) && this.format(item.time) <= this.format(this.queryForm.date2)
            } else {
              return item.product_id == this.queryForm.name && this.format(this.queryForm.date1) <= this.format(item.time) <= this.format(this.queryForm.date2) && item.distribution_mode === this.queryForm.region
            }
          })
        }
      })
    },
    // 重置表单数据
    resetForm() {
      this.$refs.queryRef.resetFields()
      this.getOrderList()
    },
    // 时间处理函数
    format(time) {
      return new Date(time).getTime()
    },
    onchange() {
      this.getOrderList()
    }
  }
}
</script>

<style scoped lang="less">
.queryForm {
  border: 1px solid #DCDFE6;
  padding: 15px;
  margin-bottom: 15px;
}
.line {
  text-align: center;
}
.number {
  position: relative;
  .tabs-bar {
    position: absolute;
    top: -40px;
    right: -20px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: red;
    color: #fff;
    border-radius: 50%;
}
}
</style>
